<template>
  <div class="global-box">
    <div class="global-box-title">编辑</div>
    <a-form-model ref="ruleForm" :model="form" :rules="rules" @submit="onSubmit" @submit.native.prevent>
      <d-form-item :rules="rules" :datas="fieldArr1" :form="form">
        <template slot="title"><a-icon type="snippets" style="margin-right: 5px" />案件基本信息</template>
      </d-form-item>
      <d-form-item :rules="rules" :datas="fieldArr2" :form="form">
        <template slot="title"><a-icon type="snippets" style="margin-right: 5px" />嫌疑人信息</template>
        <!--//自定义刑拘起止时间-->
        <template slot="slots-timeDetention">
          <a-range-picker
            v-model="form.timeDetention"
            :valueFormat="'YYYY-MM-DD HH:mm:ss'"
            style="width: 200px"
            @change="changeRangePicker"
          />
        </template>
      </d-form-item>
      <d-form-item :rules="rules" :datas="fieldArr3" :form="form">
        <template slot="title"><a-icon type="snippets" style="margin-right: 5px" />涉案账号信息</template>
      </d-form-item>
      <div class="ant-descriptions ant-descriptions-bordered">
        <div class="ant-descriptions-title"><a-icon type="snippets" style="margin-right: 5px" />涉案信息</div>
        <div class="ant-descriptions-view" style="padding: 24px">
          <div class="cust-item-label">(1):涉案电话</div>
          <a-form-model-item prop="suspectTelephone" label="嫌疑人电话" :label-col="{ span: 2 }" :wrapper-col="{ span: 5 }">
            <a-input v-model="form.suspectTelephone" placeholder="请输入" />
          </a-form-model-item>
          <div class="cust-item-label">(2):作案工具</div>
          <a-form-model-item prop="socialAccount" label="社交账号" :label-col="{ span: 2 }" :wrapper-col="{ span: 5 }">
            <a-input v-model="form.socialAccount" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item prop="socialTools" label="社交工具" :label-col="{ span: 2 }" :wrapper-col="{ span: 5 }">
            <j-dict-select-tag v-model="form.socialTools" placeholder="请选择" dictCode="social_tools" />
          </a-form-model-item>
          <div class="cust-item-label">(3):涉案网络</div>
          <a-form-model-item prop="websiteInvolved" label="涉案网址" :label-col="{ span: 2 }" :wrapper-col="{ span: 5 }">
            <a-input v-model="form.websiteInvolved" placeholder="请输入" />
          </a-form-model-item>
        </div>
      </div>
      <div class="ant-descriptions-submit">
        <a-button type="primary" @click="onSubmit"> 确定 </a-button>
        <a-button style="margin-left: 10px" @click="onCancle"> 取消 </a-button>
      </div>
    </a-form-model>
  </div>
</template>

<script>
import * as caseApi from '@/api/modules/case.js'
import dFormItem from "./modules/dFormItem";
export default {
  inject:['closeCurrent'],
  components:{
    dFormItem
  },
  data() {
    return {
      id: null,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      fieldArr1: [
        {label: '案件编号', prop: 'theCaseNumber', tagType: 'input', disabled: true},
        {label: '案发时间', prop: 'timeOfCrime', tagType: 'date-picker', disabled: true},
        {label: '办案单位', prop: 'caseHandlingUnit', tagType: 'input', span: 2, disabled: true},
        {label: '案件名称', prop: 'caseName', tagType: 'input', disabled: true},
        {label: '立案时间', prop: 'caseOfTime', tagType: 'date-picker', disabled: true},
        {label: '受理单位', prop: 'toAcceptTheUnits', tagType: 'input', span: 2, disabled: true},
        {label: '办案人', prop: 'caseHandler', tagType: 'input', disabled: true},
        {label: '判刑人', prop: 'sentencedPerson', tagType: 'input', disabled: true},
        {label: '联系电话', prop: 'contactNumber', tagType: 'input', disabled: true},
        {label: '损失人民币', prop: 'lossOfRmb', tagType: 'input', disabled: true},
        {label: '受害人姓名', prop: 'nameOfVictim', tagType: 'input'},
        {label: '受害人性别', prop: 'victimGender', tagType: 'dict-select', dictCode:'sex'},
        {label: '受害人职业', prop: 'victimOccupation', tagType: 'dict-select', dictCode:'victim_occupation'},
        {label: '受害人学历', prop: 'victimsEducation', tagType: 'dict-select', dictCode:'victim_education'},
        {label: '受害人身份证', prop: 'victimIdCard', tagType: 'input', span: 2},
        {label: '受害人年龄', prop: 'ageOfVictim', tagType: 'input', span: 2},
        {label: '作案工具', prop: 'crimeTools', tagType: 'dict-select', type: 'radioButton', dictCode:'a_trebuchet', span: 4},
        {label: '诈骗类型', prop: 'fraudType', tagType: 'dict-select', type: 'radioButton', dictCode:'case_fraud_type', span: 4, class: 'padding_class'},
        {label: '案情描述', prop: 'accidentDescription', tagType: 'textarea', span: 4},
        {label: '案件状态', prop: 'caseStatus', tagType: 'dict-select', dictCode:'state_of_the_case', span: 2},
        {label: '录入部级侦办平台', prop: 'investigationPlatform', tagType: 'input', tagType: 'dict-select', type: 'radio', dictCode:'investigation_platform', span: 2},
      ],
      fieldArr2: [
        {label: '嫌疑人姓名', prop: 'nameOfSuspect', tagType: 'input'},
        {label: '嫌疑人身份证号', prop: 'suspectIdNumber', tagType: 'input'},
        {label: '刑拘起止时间', prop: 'timeDetention'/*, tagType: 'range-picker'*/},
        {label: '刑拘地点', prop: 'placeCriminalDetention', tagType: 'input'},
      ],
      fieldArr3: [
        {label: '嫌疑人账户名', prop: 'suspectAccountName', tagType: 'input'},
        {label: '嫌疑人账号', prop: 'suspectAccountNumber', tagType: 'input'},
        {label: '受害人账号类型', prop: 'victimAccountType', tagType: 'dict-select', dictCode:'victim_account_type'},
        {label: '嫌疑人账号类型', prop: 'suspectAccountType', tagType: 'dict-select', dictCode:'suspect_account_type'},
        {label: '转账时间', prop: 'transferTime', tagType: 'date-picker'},
        {label: '受害人账号', prop: 'vctimAccountNumber', tagType: 'input'},
        {label: '转账方式', prop: 'transferMethod', tagType: 'dict-select', dictCode:'transfer_way'},
        {label: '汇款金额（元）', prop: 'remittanceAmount', tagType: 'input'},
      ],
      form: {},
      rules: {
        // 受害人姓名
        nameOfVictim: [
          { required: false, message: '请输入', trigger: 'change' },
          { max: 15, message: '长度不能超过15个字符', trigger: 'change' }
        ],
        // 案情描述
        accidentDescription: [
          { required: false, message: '请输入', trigger: 'change' },
          { max: 500, message: '长度不能超过500个字符', trigger: 'change' }
        ],
        // 嫌疑人姓名
        nameOfSuspect: [
          { required: false, message: '请输入', trigger: 'change' },
          { max: 15, message: '长度不能超过15个字符', trigger: 'change' }
        ],
        // 嫌疑人身份证号
        suspectIdNumber: [
          { required: false, message: '请输入', trigger: 'change' },
          { max: 18, message: '长度不能超过18个字符', trigger: 'change' }
        ],
        // 受害人账号
        vctimAccountNumber: [
          { required: false, message: '请输入', trigger: 'change' },
          { max: 20, message: '长度不能超过20个字符', trigger: 'change' }
        ],
        // 嫌疑人电话
        suspectTelephone: [
          { required: true, message: '请输入', trigger: 'change' },
          { min: 11, max: 20, message: '长度应为11到20', trigger: 'change' }
        ],
        // 社交账号
        socialAccount: [
          { required: true, message: '请输入', trigger: 'change' },
          { min: 1, max: 20, message: '长度应为1到20', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    if(this.$route.query.id) {
      this.id = this.$route.query.id
      this.getRecord()
    }
  },
  methods: {
    getRecord() {
      caseApi.getQueryById({id: this.id}).then((res) => {
        if (res.success) {
          this.form = Object.assign({}, this.form, res.result)
          // 刑拘起止时间
          if(Object.keys(this.form).length>0 && this.form.startTimeDetention && this.form.stopTimeDetention)this.$set( this.form, 'timeDetention', [this.form.startTimeDetention, this.form.stopTimeDetention] )
        } else {
          this.$message.warn(res.message);
        }
      }).catch(e=>{
        this.$message.warn("请求失败！");
      })
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          caseApi.caseEdit(this.form).then((res) => {
          if (res.success) {
            this.$message.success(res.message);
            this.onCancle()
          } else {
            this.$message.warn(res.message);
          }
        }).catch(e=>{
          this.$message.warn("请求失败！");
        })
        } else {
          return false
        }
      })
    },
    // 刑拘起止时间
    changeRangePicker(dates) {
      this.$set( this.form, 'startTimeDetention', dates[0] )
      this.$set( this.form, 'stopTimeDetention', dates[1] )
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()
    },
    onCancle() {
      // 注意：以下代码必须存在
      // inject:['closeCurrent'],
      this.closeCurrent()
      this.$router.push({ path: "/case" })
    },
  }
}
</script>
<style lang="less" scoped>
.global-box {
  background-color: #fff;
  .global-box-title {
    font-size: 18px;
    color: #000;
    border-bottom: 1px #e8e8e8 solid;
    padding: 10px 24px;
  }
  /deep/.ant-descriptions {
    padding: 24px 24px 0 24px;
  }
  /deep/.padding_class {
    // padding: 8px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .cust-item-label {
    color: #161616;
  }
  .ant-descriptions-submit {
    margin: 24px;
    padding-bottom: 24px;
  }
}
</style>
